<template>
    <div class="search-bar">
        <input type="text" placeholder="请输入搜索地址" v-model="keyword">
        <div class="search-result" v-show="keyword.length>0">
            <ul class="result-list">
                <li v-for="(item,index) in tipList" :key="index" @click="setAddress(item)">
                    <h4>{{item.name}}</h4>
                    <span>{{item.district}}</span>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import {autocomplete} from '@/utils/map';
import {mapMutations} from 'vuex';
export default {
    data(){
        return {
            keyword:'',
            tipList:[],   //地址列表
            city:''
        }
    },
    watch:{
        async keyword(){
            try{
                let result = await autocomplete(this.keyword,this.city);
                this.tipList = result.tips;
            }catch(e){
                console.log(e);
            }
        }
    },
    methods:{
        ...mapMutations('position',['SET_POSITION']),
        setAddress(item){
            window.localStorage.setItem('positionData',`${item.district}${item.name}`);
            this.SET_POSITION(`${item.district}${item.name}`);
            this.$router.push('/main')
        }
    }
}
</script>

<style scoped lang="scss">
     .search-bar{
         @include size(100%,44px);
         @include border-1px(bottom);
         background: #fff;
         padding:0 15px;
         line-height: 44px;
         input{
             @include size(100%,30px);
             border-radius: 20px;
             border:none;
             outline: none;
             background: #eee;
             padding:0 15px;
         }
         .search-result{
             width:100%;
             position: fixed;
             top:44px;
             left:0;
             right:0;
             bottom:0;
             background: rgba(0,0,0,.5);
             overflow: auto;
         }
         .result-list{
             background:#eee;
             li{
                 width:100%;
                 padding:15px;
                 @include border-1px(bottom);
             }
         }
     }
</style>

